<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <style>
        *{
            padding:0;
            margin:0;
        }
        #bg img {
            width: 99%;
            position: fixed;
        }

        #container {
            width: 99%;
            position: relative;
        }

        #nav {
            height: 50px;
            background: #5A5965;
            margin-bottom: 1px;
            position: relative;
            top: 0;
        }

        #nav a {
            text-decoration: none;
            display: inline-block;
            color: #FFFFFF;
            line-height: 50px;
            font-family: "华文彩云";
            width: 33.15%;
            text-align: center;
            font-size: 2em;
        }

        #nav a:hover {
            color: white;
            background: blue;
        }

        .swiper-container {
            width: 430px;
            height: 950px;
            /* border:1px solid; */
            position: relative;
            margin: 35px auto;
            /* box-shadow:1px 2px #2C2C2C; */
            border-radius:5px;

        }

        .swiper-slide img {
            widows: 430px;
            height: 950px;
            position: relative;
        }
        p{
            font-family:"华文行楷";
            color:white;
            text-align:center;
            font-size:1.5em;
            margin:10px 0 0 ;
        }
    </style>
</head>

<body>
    <div id="bg">
        <img src="../images/bg7.jpg" alt="">
        <div id="container">
            <div id="nav">
                <a href="../html/home.html">主页</a>
                <a href="../html/hobby.html">爱好</a>
                <a href="../html/scores.html">成绩</a>
            </div>
            <div>
                <p>下面是我收藏的一些软件，有学习的、刷视频的、也有购物、外卖等等。边上的按钮和滑动可以翻页噢！</p>
            </div>
            <div class=" swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../images/banner1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner2.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner3.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner4.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner5.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner6.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner7.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner8.jpg" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 那个圆点-->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>

            </div>
        </div>

    </div>

    <script src="../js/swiper.min.js"></script>

    <script>
        $(document).ready(function () {

        })
    </script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })        
    </script>

</body>

</html>